<template>
  <h3>阻止默认事件</h3>
  <div>
    <a @click="clickBtn" href="https://baidu.com">百度</a>
    <br>
    <a @click="stopHref($event)" href="https://baidu.com">点击百度不跳转</a>
    <br>
    <p>除了使用方法阻止这个跳转事件,还可以直接在html里面加prevent 来阻止默认事件</p>
    <a @click.prevent="clickBtn" href="https://baidu.com">点击百度不跳转</a>
  </div>

  <h4>事件冒泡,触发子元素同时也触发了父元素</h4>
  <div @click="clickDiv">
    <p @click="clickP">点击文本p同时也触发了div的点击</p>
  </div>

  <div @click="clickDiv1">
    <p @click="clickP1($event)">点击文本p同时不会触发div的点击</p>
  </div>

  <div @click="clickDiv">
    <p @click.stop="clickP">点击文本p可以直接通过stop阻止触发div父类</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },methods: {
    clickBtn() {
      console.log("点击了按钮,这里默认点击以后会跳转,同时也会触发点击事件,但是跳转以后点击事件就感受不到了,这里可以通过事件阻止跳转")
    },
    // 阻止 a 标签的 href 跳转
    stopHref(e) {
      e.preventDefault(); // 这里点击就阻止了默认事件
      console.log("点击了阻止默认事件")
    },
    clickDiv() {
      console.log("DIV")
    },
    clickP() {
      console.log("p")
    },
    clickDiv1() {
      console.log("DIV")
    },
    clickP1(e) {
      // 这里给p1方法加阻止事件冒泡
      e.stopPropagation();
      console.log("p")
    }
  }
}
</script>